<template>
  <el-card class="box-card">
    <el-table :data="page.rows" highlight-current-row stripe border>
      <el-table-column prop="userName" label="收货人姓名"></el-table-column>
      <el-table-column prop="userPhone" label="收货人电话"></el-table-column>
      <el-table-column prop="address" label="收货地址"></el-table-column>
      <el-table-column prop="description" label="备注"></el-table-column>
      <el-table-column inline-template label="操作">
        <span>
             <el-tooltip class="tip" placement="top" content="编辑收货地址">
						  <el-button class="el-icon-edit" type="text" size="large" @click="handleEdit(row)"></el-button>
             </el-tooltip>
            <el-tooltip class="tip" placement="top" content="删除收货地址">
						  <el-button class="el-icon-delete" type="text" size="large" @click="handleDelete(row)"></el-button>
             </el-tooltip>
          </span>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-col :span="24" class="toolPage">
      <el-button @click="handleAdd">添加收货地址</el-button>
      <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
    </el-col>
  </el-card>
</template>

<script>
  export default {
    created() {
      this.loadGridData();
    },
    data() {
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
          rows: []
        },

        editFormVisible: false,//编辑界面显是否显示
        editFormTtile: '编辑',//编辑界面标题
        listLoading: true
      }
    },

    methods: {
      handleSizeChange(size) {
        this.page.size = size
        this.loadGridData()
      },
      handlePageChange(current) {
        this.page.current = current
        this.loadGridData()
      },
      loadGridData() {
        this.listLoading = true;
        let param = {
          pageSize: this.page.size,
          page: this.page.current,
        }
        let userId = this.$route.params.id
        this.axios.get(`/users/${userId}/receivers`, { params: param }).then(response => {
          this.page = response.data
          this.listLoading = false
        })
      },
      handleAdd() {
        let userId = this.$route.params.id
        this.$router.push(`/users/${userId}/receivers/new`)
      },
      handleEdit(row) {
        let userId = this.$route.params.id
        this.$router.push(`/users/${userId}/receivers/${row.id}/edit`)
      },
      handleDelete(row) {
        this.$confirm('确认删除此信息吗?', '提示', {})
          .then(() => { this.axios.delete(`/users/receivers/${row.id}`).then(() => { this.loadGridData() }) })

      }
    }
  }

</script>

<style>

</style>